<template>
    <div class="nav-footer bg-white pt-3">
        <div class="nav-footer-item d-flex jc-around fs-md">
          <div @click="getActive(i)" v-for="(item,i) in navList" :key="i">
            <router-link  tag="div" :to="item.to" :class="{active: item.to === $route.path}" >
              <i :class="'iconfont icon-'+item.icon"></i> 
              <div class="py-1" style="text-align: center;">{{item.name}}</div>
            </router-link> 
          </div>
        </div>
    </div>
</template>

<script>
export default {
  data(){
     return {
      navList: [
        { 
          to: '/home',
          name: '首页',
          icon: 'shouye'
        },
        {
          to: '/classify',
          name: '分类',
          icon: 'all'
        },
        {
          to: '/shopCar',
          name: '清单',
          icon: 'juxing'
        },
        {
          to: '/user',
          name: '个人',
          icon: 'sself'
        },

      ],
      active: 0,
     }
  },
  methods: {
    getActive(i){
      this.active = i
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  
}
.nav-footer-item div {
   display: block;
   align-items: center;
   

}
.nav-footer-item div i {
  font-size: 2rem;
}
.active {
   color: #e74e4e;
}
.nav-footer {
  border-top: 1px solid #dedede;
  
}
</style>


